<template>
  <div class="elite-wrap">
    <van-nav-bar left-arrow placeholder fixed title="精英" @click-left="back" />
    <div class="cont">
      <div class="cont-card">
        <div class="card-item">
          <div class="ofets">
            <span>当前等级</span>
          </div>
          <div class="leven">Lv1.会员</div>
          <div class="proess">
            <span class="fst">0</span>
            <span class="xg">/</span>
            <span class="all">250</span>
          </div>
          <div class="desc">在获得250成长值，可升级为青铜会员</div>
        </div>
        <div class="card-zs">
          <img src="@img/zs.png" alt="" />
        </div>
      </div>
      <div class="list">
        <van-row :gutter="[37, 20]">
          <van-col span="6" v-for="i in allPic" :key="i" class="list-col">
            <div class="list-img">
              <img src="@img/cl.png" alt="" />
            </div>
            <div class="list-title">专属标识</div>
          </van-col>
        </van-row>
      </div>
      <div class="up-down">
        <img
          src="@img/sq.png"
          alt=""
          @click="toMore(8)"
          style="transform: rotate(180deg)"
          v-if="allPic > 4"
        />
        <img src="@img/sq.png" alt="" @click="toMore(4)" v-if="allPic <= 4" />
      </div>
    </div>
    <div class="card-list">
      <div class="list-wrap">
        <div class="wrap-head">
          <div class="ead" :class="{ active: activeIndex == 0 }">活动社区</div>
          <div class="ead">精英案例</div>
        </div>
        <div class="card-i" v-for="i in 3" :key="i">
          <div class="icard">
            <div class="carIn">
              <div class="inImg">
                <img src="@img/banner.png" alt="" />
              </div>
              <div class="in-info">
                <div class="title">怎么样才完成完整PPT</div>
                <div class="tiem">2023年2月3日 12:22</div>
                <div class="addr">公司11楼1102会议室</div>
              </div>
            </div>
          </div>
          <div class="c-botm">
            <van-row>
              <van-col span="12">
                <div class="btm-l">参与人数无限制</div>
              </van-col>
              <van-col span="12">
                <div class="btm-r">
                  <van-button round type="success" class="hdbtn"
                    >参与活动</van-button
                  >
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script name="Elite" setup>
import { ref } from "vue";

const allPic = ref(4);
const activeIndex = ref(0);
const back = () => {
  window.history.back();
};
const toMore = (value) => {
  allPic.value = value;
};
</script>

<style scoped lang="scss">
.elite-wrap {
  background: linear-gradient(0, #c1ffe5 0%, #f9fffe 100%);
  .cont {
    padding: 23px 16px 0 16px;
    .cont-card {
      background: url("@img/zsbg.png") no-repeat;
      background-size: 100% 100%;
      height: 160px;
      position: relative;
      .card-item {
        padding: 19px 14px 15px 19px;
        
        .ofets {
          span {
            display: inline-block;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            padding: 1px 5px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            text-align: center;
            font-style: normal;
          }
        }
        .leven {
          margin-top: 13px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
          line-height: 22px;
          text-align: left;
          font-style: normal;
        }
        .proess {
          margin-top: 25px;
          padding-bottom: 4px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.33);
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            line-height: 20px;
            text-align: right;
            font-style: normal;
          }
        }
        .desc {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #ffffff;
          line-height: 17px;
          text-align: left;
          font-style: normal;
          padding-top: 7px;
        }
      }
      .card-zs {
        position: absolute;
        right: 0;
        top: -27px;
      }
    }
  }
  .list {
    padding: 14px 20px 28px 14px;
    .list-col {
      text-align: center;
      .list-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #676b6b;
        line-height: 17px;
        text-align: center;
        font-style: normal;
        margin-top: 8px;
      }
    }
  }
  .up-down {
    text-align: center;
    padding-bottom: 4px;
  }
}
.card-list {
  background: #ffffff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  .list-wrap {
    padding: 16px;
    .wrap-head {
      display: flex;
      .ead {
        flex: 1;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #676b6b;
        line-height: 22px;
        font-style: normal;
      }
      .active {
        color: #272b2d;
      }
    }
    .card-i {
      padding-top: 9px;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      padding-bottom: 16px;
      .icard {
        padding: 14px 0;
        .carIn {
          display: flex;
          .inImg {
            width: 140px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .in-info {
            flex: 1;
            padding: 6px 0 3px 10px;
            .title {
              height: 44px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 16px;
              color: #272b2d;
              line-height: 22px;
              text-align: left;
              font-style: normal;
            }
            .tiem {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #676b6b;
              line-height: 17px;
              text-align: left;
              font-style: normal;
              padding-bottom: 8px;
            }
            .addr {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #676b6b;
              line-height: 17px;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }
      .c-botm {
        .btm-l {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #b9bdbd;
          line-height: 24px;
          text-align: left;
          font-style: normal;
        }
        .btm-r {
          text-align: right;
          .hdbtn {
            height: 24px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            line-height: 24px;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }
  }
}
</style>
